<template>
	<div class="bg">
		<div class="loginbox">
			<div class="loginbox-hd">智答星AI互动课堂</div>
			<div class="loginbox-bd flex flex-v flex-pack-center">
				<div class="input-group" v-if="mod == 'login'">
					<a-form @submit="handleSubmit" autocomplete="off" :form="form">
						<div class="input-row flex flex-align-center" style="overflow: visible">
							<i class="user icon"></i>
							<input type="text" class="flex-1" v-model.trim="username" placeholder="请输入用户名" />
							<dropmenu
								:reftitletypelist="loginInfolist"
								@selTalkName="selName"
								v-if="loginInfolist.length > 0"
							>
								<template slot-scope="item">
									{{ item.data.username }}
								</template></dropmenu
							>
						</div>
						<div class="input-row flex flex-align-center">
							<i class="pwd icon"></i>
							<input type="password" class="flex-1" placeholder="请输入密码" v-model.trim="password" />
						</div>
						<div class="mt10">
							<a-checkbox v-model="isRemeber"> 记住密码 </a-checkbox>
						</div>
						<a-button type="primary" html-type="submit" class="loginBtn">立即登录</a-button>
					</a-form>
				</div>
				<div class="input-group input-group-lg" v-else>
					<startClass @cancel="reback"></startClass>
				</div>
				<div class="version">当前版本号{{ Version }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import defaultSettings from '@/config/defaultSettings';
import { PwdReg } from '@/utils/validate';
import md5 from 'md5';
import { sysManageapi, postAction } from '@/api/index.js';
import QS from 'qs';
import search from '@/components/search/search';
import startClass from './startClass';
import dropmenu from '@/components/dropmenu';
let timer = null;
export default {
	data() {
		return {
			mod: 'login',
			username: '',
			password: '',
			isHasMdspwd: 0,
			classList: [],
			subjectList: [],
			startClassInfo: {},
			isRemeber: true,
			loginInfolist: [],
			form: null,
		};
	},
	components: { search, startClass, dropmenu },
	mounted() {
		//如果有token 怎显示上课页面
		let access_token = sessionStorage.getItem('access_token');
		this.mod = access_token ? 'start' : 'login';
		this.$nextTick(() => {
			// To disabled submit button at the beginning.
			try {
				var userinfo = JSON.parse(localStorage.getItem('loginStore'));
				if (userinfo && userinfo.length > 0) {
					this.username = userinfo[0].username;
					this.password = userinfo[0].password;
					this.loginInfolist = userinfo;
				}
			} catch (e) {
				// TODO handle the exception
			}
		});
	},
	computed: {
		...mapState(['Version']),
	},
	created() {},
	beforeCreate() {
		this.form = this.$form.createForm(this, { name: 'customized_form_controls' });
	},
	beforeDestroy() {
		if (timer) {
			clearTimeout(timer);
			timer = null;
		}
	},
	methods: {
		...mapActions(['Login', 'Logout', 'GetInfo']),
		async handleSubmit(e) {
			e.preventDefault();
			await this.getMd5PassIsNull(this.username);
			if (this.isHasMdspwd == -1) {
				this.$message.error('账户不存在');
				return;
			}
			const loginParams = {
				username: this.username.trim(),
			};
			if (this.isHasMdspwd == 1) {
				loginParams.md5Pass = md5(this.password.trim());
			} else {
				loginParams.password = this.password.trim();
			}
			this.loginBtn = true;
			console.log(JSON.stringify(loginParams));
			/* 参数序列化 */
			this.$postAction(this.$api.login, loginParams)
				.then((da) => {
					if (da.code == 1) {
						console.log('数据' + JSON.stringify(da));
						let data = da.data;
						let access_token = data.access_token;
						/* 关闭浏览器不保存 */
						sessionStorage.setItem('access_token', access_token);
						sessionStorage.setItem('refresh_token', data.refresh_token);
						this.mod = 'start';
						if (this.isRemeber) {
							var useritem = {
								username: this.username,
								password: this.password,
							};
							if (this.loginInfolist && this.loginInfolist.length > 0) {
								const index = this.loginInfolist.findIndex((item) => item.username == this.username);
								if (index > -1) {
									this.loginInfolist[index] = useritem;
								} else {
									this.loginInfolist.unshift(useritem);
									if (this.loginInfolist.length > 10) {
										this.loginInfolist.pop();
									}
								}
							} else {
								this.loginInfolist = [useritem];
							}

							localStorage.setItem('loginStore', JSON.stringify(this.loginInfolist));
						}
					}
				})
				.finally(() => {
					this.loginBtn = false;
				});
		},
		//获取是否有md5密码
		getMd5PassIsNull(username) {
			return new Promise((resolve, reject) => {
				if (username) {
					this.$postAction(this.$api.getMd5PassIsNull + '?username=' + username.trim())
						.then((res) => {
							if (res && res.code == 1) {
								this.isHasMdspwd = res.data;
								resolve(res.data);
							} else {
								resolve();
							}
						})
						.catch((err) => {
							//返回错误
							reject(err);
						});
				} else {
					reject();
				}
			});
		},
		reback() {
			this.mod = 'login';
		},
		selName(userInfo) {
			let { username, password } = userInfo;
			this.username = username;
			this.password = password;
		},
	},
};
</script>

<style scoped="scoped" lang="less">
.bg {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	right: 0;

	.loginbox {
		// background: rgba(255, 255, 255, 0.7);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 9rem;
		overflow: hidden;
		.loginbox-hd {
			border-radius: 10px 10px 0 0;
			background: @primary-color;
			height: 0.85rem;
			border: 1px solid #4d5053;
			position: relative;
			text-align: center;
			color: #fff;
			font-size: 30px;
			line-height: 0.85rem;
			&::before,
			&::after {
				content: '';
				display: block;
				width: 0.2rem;
				height: 0.2rem;
				background: #ffe95d;
				border: 1px solid #4d5053;
				border-radius: 100px;
				position: absolute;
				right: 0.2rem;
				top: 50%;
				transform: translateY(-50%);
			}
			&::before {
				left: 0.2rem;
			}
		}
		.loginbox-bd {
			background: #f3f8ff;
			border: 1px solid #4d5053;
			border-top: none;
			height: 5.1rem;
		}
		.input-group {
			width: 5rem;
			margin: 0 auto;
			&.input-group-lg {
				width: 6rem;
			}
			.input-row {
				line-height: 0.8rem;
				height: 0.82rem;
				overflow: hidden;
				border: 1px solid @primary-color;
				border-radius: 1rem;
				position: relative;
				font-size: 0.24rem;
				background: #fff;
				padding-right: 0.36rem;
				i.icon {
					display: block;
					width: 0.36rem;
					height: 0.36rem;
					background: no-repeat center center;
					background-size: 100% auto;
					margin: 0 0.4rem;

					&.user {
						background-image: url(/img/user.png);
					}

					&.pwd {
						background-image: url(/img/password.png);
					}
				}
				label {
					color: #2e2424;
					padding: 0 0.4rem;
					font-size: 0.3rem;
				}
			}
		}

		.input-row + .input-row {
			margin-top: 0.24rem;
		}

		.loginBtn,
		.rebackBtn {
			height: 0.8rem;
			display: block;
			background: @primary-color;
			text-align: center;
			color: #fff;
			line-height: 0.8rem;
			margin-top: 0.4rem;
			width: 100%;
			border: none;
			font-size: 0.24rem;
			border-radius: 100px;
		}
		.rebackBtn {
			background: #becad4;
			color: #2e2424;
			width: 1.6rem;
			margin-right: 0.16rem;
		}
	}
}
.version {
	text-align: right;
	color: #999;
	font-size: 20px;
	position: absolute;
	right: 30px;
	bottom: 30px;
}
</style>
